<template>
  <div class="index">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="team">
          <div class="powertop">
            <div class="powertopcon">
              <router-link class="powertopli " to="/callsystem/newcalls/waihuzhongxin">外呼任务</router-link>
              <router-link class="powertopli teamlei " to="/callsystem/newcalls/waihuzhongxin/bodajilu">拨打记录</router-link>
            </div>
          </div>
        </div>
        <div class="con" >
          <div class="t_search_box">
            <el-input  v-model="formInline.task_name" placeholder="任务名称"></el-input>
            <el-select clearable v-model="formInline.tag" placeholder="意向标签">
              <el-option v-for="(item,index) in tagList" :key="index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
            <el-input  v-model="formInline.mobile" placeholder="联系电话"></el-input>
            <el-input  v-model="formInline.source" placeholder="订单来源"></el-input>
            <el-select v-model="formInline.status" clearable placeholder="订单状态">
              <el-option label="初步审核" value="120"></el-option>
              <el-option label="待完善证件信息" value="150"></el-option>
              <el-option label="待审核" value="200"></el-option>
              <el-option label="待开卡" value="450"></el-option>
              <el-option label="已领取" value="460"></el-option>
              <el-option label="开卡中" value="470"></el-option>
              <el-option label="待发货" value="500"></el-option>
              <el-option label="已发货" value="550"></el-option>
              <el-option label="已退货" value="-700"></el-option>
              <el-option label="开卡失败" value="-460"></el-option>
              <el-option label="证件不合格待重传" value="-200"></el-option>
              <el-option label="订单终止" value="0"></el-option>
            </el-select>
            <el-select v-model="formInline.active_status" clearable placeholder="激活状态">
              <el-option label="无" value="0">无</el-option>
              <el-option label="已激活" value="100">已激活</el-option>
              <el-option label="激活且充值" value="200">激活且充值</el-option>
            </el-select>
            <el-select v-model="formInline.refund_status" clearable placeholder="退款状态">
              <el-option label="正常" value="100">正常</el-option>
              <el-option label="退款中" value="200">退款中</el-option>
              <el-option label="退款成功" value="300">退款成功</el-option>
            </el-select>
            <el-select v-model="formInline.called_status  " clearable placeholder="拨通状态">
              <el-option label="未拨通" value="1">未拨通</el-option>
              <el-option label="已拨通" value="2">已拨通</el-option>
            </el-select>
            <el-input  v-model="formInline.good_sku" placeholder="商品编码"></el-input>
            <el-input  v-model="formInline.order_id" placeholder="订单ID"></el-input>
            <el-select clearable v-model="formInline.userid" placeholder="请选择外呼人员">
              <el-option v-for="(item,index) in waihuren" :key="index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
            <el-date-picker  v-model="times" style="width: 500px;margin-right: 10px;" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期时间"></el-date-picker>
            <el-button type="danger" plain round  @click="resbtn" >清空</el-button>
            <el-button type="danger" round style="background-color: #2974FF;" @click="searchbtn" >搜索</el-button>
          </div>
        </div>
        <div class="fenline" ></div>
        <div class="con">
          <!-- <div style="display: flex;justify-content: space-between;">
            <div class="powertopcon">
                <div  class="powertopli powertopli_lei"  @click="change(1)" >
                  订单外呼
                  <div class="t_under_line t_under_line2 t_under_line_lei" ></div>
                </div>
                <div  class="powertopli"  @click="change(2)" >
                  其他
                  <div class="t_under_line t_under_line2 " ></div>
                </div>
            </div>
          </div> -->
          <div>
            <el-table
            v-loading='loading'
            :header-cell-style="{ 
            background:'#F4F4F4',
            color:'#7D8087'}"
              :data="tableData"
              style="width: 100%;margin-top: 20px;">
              <el-table-column
                prop="order_id"
                align="center"
                label="订单ID">
              </el-table-column>
              <el-table-column
                prop="mobile"
                align="center"
                label="联系电话">
              </el-table-column>
              <el-table-column
                prop="task_name"
                align="center"
                label="所属任务">
              </el-table-column>
              <el-table-column
                prop="class_name"
                align="center"
                label="任务类型">
              </el-table-column>
              <el-table-column
                prop="label"
                align="center"
                label="意向标签">
                <template slot-scope="scope">
                  {{ scope.row.label.toString() }}
                </template>
              </el-table-column>
              <el-table-column
                prop="call_times"
                align="center"
                label="拨打次数">
              </el-table-column>
              <el-table-column
                prop="call_at"
                align="center"
                label="最近一次通话时间">
              </el-table-column>
              <el-table-column
                prop="status_name"
                align="center"
                label="当前订单状态">
              </el-table-column>
              <el-table-column
                prop="caller_name"
                align="center"
                label="外呼人">
              </el-table-column>
              <el-table-column
                prop="achieve_goal"
                align="center"
                label="外呼目标达成">
              </el-table-column>
              <el-table-column
                prop=""
                align="center"
                label="操作">
                <template slot-scope="scope">
                  <!-- 拨打 -->
                  <el-button @click="calldig(scope.row.id,scope.row.type)"  type="danger" round style="background-color: #2974FF;"  >订单外呼</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right;margin-top: 20px;">
              <el-pagination
                @current-change="changepage"
                background
                :page-size="formInline.pageSize"
                layout="total,prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import robot from '@/components/robot.vue'
  import UploadExcelComponent from "@/components/UploadExcel/index3.vue";
  import moment from "moment";


  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot,
      "robot":robot,
      UploadExcelComponent,
    },
    name: 'quanyi',
    data() {
      return {
        times:"",
        shopid:'',
        formInline:{
          userid:"",
          order_id: "",
          good_sku: "",
          name: '',
          source: '',
          mobile: '',
          tag: '',
          status: '',
          active_status: '',
          refund_status: '',
          called_status: '',
          page:1,
          pageSize:20,
        },
        tableData: [],
        total:1000,
        loading:false,
        func_K03:false,
        url: '',
        tagList: [],
        waihuren:"",

      }
    },
    created() {
   
      let kaishi = moment().subtract(30, "days").format("YYYY-MM-DD HH:mm:ss");
      let jieshu = moment().format("YYYY-MM-DD HH:mm:ss");
      this.times = [kaishi,jieshu]
      
     


      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      //权限看搜索人员拨打
			var user = JSON.parse(localStorage.getItem('USER'));
			for (var i in user.functions) {
				var func_number = user.functions[i].code
				if (func_number.indexOf("K03") >= 0) {
					this.func_K03 = true
				}
			}
      this.url = window.location.origin
      //列表
      this.getlist()
      this.moretagList()
      this.getwaihuren()
     
    },
    methods: {
      
      //搜索
      searchbtn(){
        this.formInline.page = 1
        //列表
        this.getlist()
      },
      //意向标签
      moretagList(){
        var that = this
        axios.post("/api/plan-market/call/tag/list/v2")
          .then(function(response) {
              if (response.data.msg.code == 0) {
                that.tagList = response.data.data
              }else{
                  that.$message.error(response.data.msg.info);
              }
          })
      },
      //获取外呼人员
			getwaihuren: function() {
				axios.get("/api/plan-market/call/caller/list/v2?page=1&page_size=1000")
					.then(response => {
						if (response.data.msg.code == 0) {
              console.log('11')
              console.log(response.data.data)
							this.waihuren = response.data.data.data
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
      //列表
      getlist(){
        var that = this
        this.loading = true
        axios.post('/api/plan-market/my/call/order/details/v2',{
            start:this.times[0],
            end:this.times[1],
            userid:this.formInline.userid,
            task_name:this.formInline.task_name,
            tag:this.formInline.tag,
            mobile:this.formInline.mobile,
            source:this.formInline.source,
            status:this.formInline.status,
            active_status:this.formInline.active_status,
            refund_status:this.formInline.refund_status,
            called_status:this.formInline.called_status,
            good_sku:this.formInline.good_sku,
            order_id:this.formInline.order_id,
            page:this.formInline.page,
            page_size:this.formInline.pageSize,
        })
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log('列表')
              console.log(response)
              this.tableData = response.data.data.data
              this.total = response.data.data.total
            } else {
              this.$message.error(response.data.msg.info);
            }
            this.loading = false
          })
      },
      //翻页
      changepage(val){
        console.log(val)
        this.formInline.page = val
        this.getlist()
      },
      change:function(val){
        if(val==1){
          this.$router.push({path:'/callsystem/newcalls/waihuzhongxin/bodajilu'})
        }
        if(val==2){
          this.$router.push({path:'/callsystem/newcalls/waihuzhongxin/bodajilu2'})
        }
      },
      resbtn(){
        this.formInline.userid = ''
        this.formInline.order_id = ''
        this.formInline.good_sku = ''
        this.formInline.task_name = ''
        this.formInline.source = ''
        this.formInline.mobile = ''
        this.formInline.tag = ''
        this.formInline.status = ''
        this.formInline.active_status = ''
        this.formInline.refund_status = ''
        this.formInline.called_status = ''
        let kaishi = moment().subtract(30, "days").format("YYYY-MM-DD hh:mm:ss");
        let jieshu = moment().format("YYYY-MM-DD hh:mm:ss");
        this.times = [kaishi,jieshu]
      },
      calldig(id,type){
        // this.$router.push({path:'/callsystem/newcalls/waihuzhongxin/calldig',query:{renwuid:id}})

        var nowlink = window.location.href
				var locallink = nowlink.split("#")[0]

        if(type==3){
          window.open(locallink+'#/callsystem/newcalls/waihuzhongxin/calldig?renwuidyx='+id+'&type=3','_blank')
        }else{
          window.open(locallink+'#/callsystem/newcalls/waihuzhongxin/calldig?renwuid='+id,'_blank')
        }
				
      }
   
    },
    beforeDestroy(){
     
    },
    
    
  }
</script>

<style  scoped>

    .t_dr_btn{
        text-align: center;
        width: 160px;
        background-color:#2974FF;
        border-radius: 4px;
    }
    /deep/ .t_dr_btn .el-button--text{
      color: white;
    }

    .team {
      background: #F9F9F9;
    }

    .powertop {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .powertopcon {
      display: flex;
      
    }
    .t_jqr_box{
      background-color: #007EFF;
      color: white;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      width: 160px;
      margin-right: 30px;
      border-radius: 3px;
      cursor: pointer;

    }
    .powertopli {
      width: 180px;
      color: #727272;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 20px;
    }
    .powertopli_lei{
      background-color: white;
      color: #2974FF;
    }
    .t_under_line{
      width: 20px;
      height: 4px;
      background-color:#F9F9F9 ;
      border-radius: 4px;
      margin-top: 10px;
    }
    .t_under_line2{
    
    background-color:white ;
   
  }
    .t_under_line_lei{
      
      background-color:#2974FF ;
     
    }
    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
      color:#2974FF ;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #f4f4f4
    }
    .con {
				padding: 20px ;
    }
    .t_overtips{
      width: 100%;
      overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
      text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
      white-space: nowrap;     /*文本不换行*/
    }
    .t_tongji_box{
      background-color: rgb(241, 241, 241);
      padding: 16px 30px;
      box-sizing: border-box;
      /* font-size: 18px; */
      display: flex;
      color: #515151;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .t_title_box{
      display: flex;
      align-items: center;
      color: #525252;
      margin-bottom: 10px;
      margin-top: 20px;
    }
    .t_red_g{
      background-color: #2974FF;
      width: 4px;
      height: 16px;
      margin-right: 10px;
    }
    .t_red_time{
      color: #2974FF;
    }
    .t_search_input{
      width: 191px;
      margin-bottom: 5px;
    }
    /* .t_search_box{
      display: flex;
      flex-wrap: wrap;
    } */
    /deep/.t_search_box .el-input--suffix .el-input__inner  {
      background-color: #f7f8fa;
      border: none;
      width: 300px;
    }
    /deep/.t_search_box .el-range-editor.el-input__inner{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-date-editor .el-range-input{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-input__inner{
      background-color: #f7f8fa;
      border: none;
      
      
      
    }
    /deep/.t_search_box .el-input{
      width: 300px;
      margin-bottom: 20px;
      margin-right: 10px;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/.index .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/.index .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/.index .btn-next{ border-radius: 14px; padding: 0 10px;}

    .team .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
      padding-top: 0;
    }
    .team .teamlei {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    .el-button--danger:hover{
      background-color: #2974FF;
    }
    .fenline{
      background-color: #f4f4f4;
      height: 10px;
    }
</style>
